<template>

  <div class="refine_linklist">
    <!-- <router-view></router-view> -->
    <h2>系统链接列表</h2>
    <div class="systemgroup">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item,index) in systemgroup" :key="index">
          <el-card>
            <a :href="item.url" target="_blank">
              <img :src="JSON.parse(item.img)[0] ? JSON.parse(item.img)[0].url : ''" class="image">
            </a>
            <div class="bottom clearfix">
              <span class="title">{{item.name}}</span>
              <div class="fr">
                <img class="btn-fr" src="@/assets/system-del.png" @click="linkDel(item.id)">
                <img class="btn-fl" src="@/assets/system-edit.png" @click="linkEdit(item.id)">
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--编辑-->
    <el-dialog
      title=""
      :visible.sync="editsystem"
      width="80%"
      append-to-body
      class="editsystem"
      @close="close">
      <div class="refine_editlink">
        <h2>系统链接设置</h2>
        <el-form :label-position="labelPosition" label-width="100px" :model="formLabel">
          <el-form-item label="系统名称">
            <el-input v-model="formLabel.name" placeholder="请输入系统名称"></el-input>
          </el-form-item>
          <el-form-item label="系统链接">
            <el-input v-model="formLabel.url" placeholder="http://"></el-input>
          </el-form-item>
          <el-form-item label="背景图片">
            <el-upload
              ref="upload"
              class="upload-demo"
              :action="$config.FILE_UPLOAD_URL"
              :data='uploadobj'
              :file-list="fileList"
              :headers="headers"
              accept='.png,.jpg,.jpeg'
              :on-preview="handlePreview"
              :on-remove="uploadRemove"
              :limit="1"
              :before-upload="beforeAvatarUpload"
              :on-exceed="handleExceed"
              :on-success='uploadSuccess'>
              <el-button size="small" type="primary">上传</el-button>
              <div slot="tip" class="el-upload__tip">图片大小2MB以内，尺寸260*70</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="sure" @click="editsure">确认</el-button>
          <el-button class="cancel" @click="cancel">取消</el-button>
       </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import linkService from '@/services/SystemLinkService'
  export default {
    components: {
    },
    data: function () {
      return {
        labelPosition: 'right',
        editsystem: false,
        currentPage: 1,
        totalPage: 10,
        id: "",
        page: 1,
        systemgroup: [],
        member: {},
        formLabel: {
          name: '',
          url: ''
        },
        fileList:[],
        uploadobj:{
          filename: '',
          mimeType: "image/jpeg",
          bus: 'link'
        },
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        },
        oldData:{}
      };
    },
    created() {
      this.getData()
    },
    mounted() {
    },
    methods: {
      linkEdit(id) {
        linkService.findOne(id).then((res)=>{
          this.editsystem = true;
          this.formLabel.id = res.id;
          this.formLabel.name = res.name;
          this.formLabel.url = res.url;
          this.formLabel.createTime = res.createTime;
          this.fileList = JSON.parse(res.img);
        })
      },
      linkDel(id) {
        this.$confirm('此操作将永久删除该链接, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass:'sysClass',
        }).then(() => {
          linkService.delete(id).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getData();
          })
        })
      },
      close() {
        this.editsystem = false;
        this.formLabel={
          name: '',
          url: ''
        };
        this.fileList = [];
      },
      getData() {
        linkService.search().then((res)=>{
          this.systemgroup = res;
        });
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$alert('上传图片大小不能超过 2MB!','提示');
        }
        this.uploadobj.filename=file.name
        return isLt2M;
      },
      uploadSuccess(res){
        this.fileList.push({name:res.data.name,url:res.data.link})
      },
      uploadRemove:function(res){
        var deleteItem=res.name;
        for(var n=0; n<this.fileList.length;n++){
          if(this.fileList[n].name.indexOf(deleteItem)!=-1){
            this.fileList.splice(n, 1);
          }
        }
      },
      handlePreview(file) {
      },
      handleExceed(files) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      cancel(){
        this.editsystem = false;
        this.formLabel={
          name: '',
          url: ''
        };
        this.fileList = [];
      },
      editsure(){
        if(!this.formLabel.name){
          this.$alert('系统名称必填', '提示' );
          return false;
        }
        if(!this.formLabel.url){
          this.$alert('网址必填', '提示' );
          return false;
        }
        if(this.fileList.length===0){
          this.$alert('背景图片必传', '提示' );
          return false;
        }

        if(this.formLabel.url.indexOf('.') ===-1){
          this.$alert('输入的地址不正确', '提示' );
          return false;
        }
        let url = [];
        for (let n of this.fileList) {
          url.push({name:n.name,url:n.url});
        }
        let params = {
          id: this.formLabel.id,
          name: this.formLabel.name,
          url: this.formLabel.url,
          img: JSON.stringify(url),
          createTime: this.formLabel.createTime
        };
        linkService.update(params).then((res)=>{
          this.$alert('编辑成功',{
            callback: action => {
              this.formLabel={
                name: '',
                url: ''
              };
              this.fileList = [];
              this.editsystem = false;
              this.getData();
            }
          });
        });
      },
    }
  };
</script>

<style lang="scss">
  .refine_linklist {
    width: 100%;
    h2{
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom:1px solid #eeeeee;
      font-weight: normal;
      font-size: 18px;
      color: #0062cd;
      padding-left:30px;
      box-sizing: border-box;
      padding: 0 0 0 30px;
      text-align: left;
    }
    .el-dialog__body{
      padding:0;
    }
    .el-dialog__header{
      padding:0;
    }
    .el-dialog__headerbtn{
      top:14px;
    }
    .el-card__body{
      background-color: #f7fbfe;
      box-shadow: 0px 3px 7px 0px
      rgba(0, 0, 0, 0.08);
      border-radius: 2px;
      border: solid 1px #dddddd;
      padding:10px;
    }
    .el-card img{
      width:100%;
      height:180px;
      object-fit: cover;
    }
    .el-card .bottom{
      width:100%;
      height:40px;
      line-height: 40px;
    }
    .el-card .bottom .title{
      float: left;
      font-size: 16px;
      color: #333333;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 70%;
    }
    .el-card .bottom img{
      width: 20px;
      height: 19px;
      margin-top: 8px;
      cursor: pointer;
      object-fit: contain;
    }
    .btn-fl{
      float: left;
      margin-right:15px;
    }
    .btn-fr{
      float: right;
    }
    .systemgroup{
      padding: 20px;
    }
    .el-col{
      margin-bottom:20px;
    }
    .dialogDelete span{
      width:100%;
      display: inline-block;
      text-align: center;
    }
    .editsure{
      width: 110px;
      height: 36px;
      background-color: #0062cd;
      border-radius: 4px;
      padding:0;
    }
    .editcancel{
      width: 110px;
      height: 36px;
      border-radius: 4px;
      border: solid 1px #0062cd;
      padding:0;
      color:#0062cd;
    }
  }
  .refine_editlink {
    h2{
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom:1px solid #eeeeee;
      font-weight: normal;
      font-size: 18px;
      color: #0062cd;
      padding-left:30px;
      box-sizing: border-box;
    }
    .el-form{
      width:465px;
      margin:20px auto;
      .el-form-item__content{
        line-height: 34px;
      }
      .el-input{
        width:300px;
        float:left;

        input{
          width: 300px;
          height: 34px;
          border-radius: 2px;
          border: solid 1px #dddddd;
          font-size:14px;
        }

      }
      label{
        font-size: 14px;
        line-height: 34px;
      }

    }
    .el-upload--text{
      float: right;
      width: 58px;
      height: 34px;
      border:none;
      border-radius: 2px;
      margin-left:5px;

      button{
        background-color: #0062cd;
        border-radius: 2px;
        border:none;
        padding:0;
        width: 58px;
        height: 34px;

      }
    }
    .el-upload__tip{
      width: 300px;
      height: 34px;
      border-radius: 2px;
      border: solid 1px #dddddd;
      float: left;
      margin-top:0;
      padding: 0 15px;
      font-size: 14px;
      color: #b9b9b9;
      text-align: left;
    }
    .el-upload-list__item.is-success .el-upload-list__item-status-label {
      display: block;
      margin-top: 28px;
      margin-top: -5px;
    }
    .el-upload-list__item:first-child{
    }
    .is-success{
    }
  }
  .editsystem .el-dialog{
    display: block;
    height:70%;
  }
  .editsystem .dialog-footer{
    width: 100%;
    text-align: center;
    display: block;
  }
</style>
